<template>
  <el-dialog
    :title='this.dept.id ? "修改部门" :"添加部门"' 
    :visible.sync="dialogVisible"
    @opened="dialogOpen"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      size="small"
    >
    <el-row>
      <el-col :span="12">
        <el-form-item
        prop="name"
        label="部门名称"
        >
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
          <el-form-item
        prop="pid"
          label="父级id"
        >
          <el-input v-model="form.pid" readonly></el-input>
        </el-form-item>
      </el-col>
    </el-row>
      
      <el-form-item
        prop="sortNumber"
        label="备注"
      >
        <el-input v-model="form.note"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="saveUser"
        >保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

</template>
<script>
import deptApi from "@/api/system/dept";
 import {frameInRoutes} from '@/router/routes'
export default {
  name: "userEditForm",
  props: {
    dept: Object,
    value: Boolean
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      form: {
        name: "",
        pid: "",
        sortNumber: "",
        delFlag:null,
        createdDatetime:'',
        updateDateime:''
      }
    };
  },
  watch: {
    value(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit("input", val);
    }
  },
  methods: {
    dialogOpen() {
      this.$refs.form.resetFields();
      console.log(this.dept.id)
      if (this.dept.id) {
        deptApi.deptPage().then(res => {
          var temp = res.data 
          let form = {};
          temp.forEach(element => {
            if(this.dept.id == element.id){
              form.name = element.name;
              form.pid = element.pid;
              form.note = element.note;
              form.createdDatetime = element.createdDatetime;
              form.updateDatetime = element.updateDatetime;
              form.delFlag = element.delFlag;
              this.form = form;
            }
          });
        });
      } else {
        this.form = {};
      }
    },
    saveUser() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          var time = new Date();
          this.form.updateDatetime = time.getTime();
          console.log(this.form);
          deptApi
            .modDept({ ...this.form, id: this.dept.id })
            .then(data => {
              this.loading = false;
              this.dialogVisible = false;
              this.$emit("submit");
            });

        } else {
          return false;
        }
      });
    },
    close() {
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    }
  }
};
</script>

